<template>
  <div class="game-goods-container">
    <van-row gutter="7" justify="space-between">
      <van-col span="12" v-for="item in GoodsInfo">
        <div class="goods-item" @click="routeTo(item.gameId)">
          <div class="goods-item-image">
            <van-image :src="item.goodsImgUrl" fit="cover" radius="3px"></van-image>
          </div>
          <div class="goods-discount" v-if="item.goodsDiscount !== ''">
            <van-config-provider :theme-vars="themeVars">
              <van-tag type="warning">{{ item.goodsDiscount }}</van-tag>
            </van-config-provider>
          </div>
          <div class="goods-item-content">
            <div class="goods-name">{{ item.goodsName }}</div>
            <div class="goods-tags">
              <span class="tags-item" v-for="tags in item.goodsTags">{{ tags }}</span>
            </div>
            <div class="good-price">
              <div class="present-price">￥{{ item.presentPrice }}</div>
              <div class="original-price" v-if="item.priceTag != ''">￥{{ item.originalPrice }}</div>
              <div class="price-tag" v-if="item.priceTag != ''">{{ item.priceTag }}</div>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

import router from '../../route/index'

defineProps({
  GoodsInfo: Object
})

const themeVars = {
  tagPadding: '0px 2px',
  tagFontSize: '10px',
  tagWarningColor: '#f58045'
}

// 跳转到游戏详情页
const routeTo = (gameId) => {
  console.log(gameId);
  router.push({
    path: '/gamedetail',
    query: {
      id: gameId
    }
  })
}

</script>

<style scoped>
.game-goods-container {
  padding: 4px 10px 0px 10px;
}
.goods-item {
  margin-bottom: 7px;
  border-radius: 3px;
  /* border: 1px solid #ebedf0; */
  box-shadow: 0px 3px 5px #dcdee0;
  background-color: #fff;
}
.goods-discount {
  position: relative;
}
.goods-discount span {
  position: absolute;
  bottom: 1px;
  left: 10px;
  border-radius: 3px;
  box-shadow: 1px 1px 3px #646566;
}
.goods-item-content {
  padding: 0px 10px 10px 10px;
}
.goods-item-content .goods-name {
  padding: 3px 0px;
  font-size: 14px;
  line-height: 20px;
}
.goods-item-content .goods-tags {
  height: 18px;
  font-size: 10px;
  color: #969696;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.tags-item {
  padding: 1px 3px;
  margin-top: 3px;
  margin-right: 5px;
  border: 1px solid #ebedf0;
  display: inline;
  border-radius: 2px;
}

.good-price {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
}

.present-price {
  font-size: 15px;
}

.original-price {
  margin-left: 5px;
  font-size: 12px;
  text-decoration: line-through;
  color: #969799;
}

.price-tag {
  font-size: 10px;
  margin-left: 2px;
  padding: 1px 3px;
  background-color: #323233;
  color: #fff;
  border-radius: 3px;
  transform: scale(0.8);
}
</style>
